<template>
	<BOX title="这是标题 leftone">
		<template #content>
			<div style="width: 100%;height: 300px;">
				<echarts :option="option"></echarts>
			</div>

		</template>
	</BOX>
</template>

<script lang="ts" setup>
	import BOX from "@/components/z-box/index.vue"
	import echarts from '@/components/z-echarts/index.vue';
	import { reactive } from "vue"
	const option = reactive({
		title: {
			text: "主标题",
			textStyle: {
				color: "#fff"
			},

			subtext: "这是一个副标题",
			subtextStyle:{
				color: "#fff"
			}
		},
		textStyle: {
			color: "#fff",
		},
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: [150, 230, 224, 218, 135, 147, 260],
				type: 'line',
				itemStyle: {
					color: "red"
				}
			}
		]
	});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>